<template>
  <div class="about-summary">
    <div class="banner">
      <img src="@/assets/images/20200401115954178998.png" alt="" />
    </div>

    <div class="company-info">
      <div class="left-sidebar">
        <h3>公司新闻</h3>
        <ul class="menu">
          <router-link :to="{ path: './concept' }">
            <li class="active">延保概念</li>
          </router-link>
          <router-link :to="{ path: './scope' }">
            <li>延保范围</li>
          </router-link>
          <router-link :to="{ path: './brands' }">
            <li>服务品牌</li>
          </router-link>
        </ul>
        <div class="contact-info">
          <div class="contact-item">
            <img
              src="@/assets/images/202004011028126d577b.png"
              alt="咨询热线"
              class="contact-icon"
            />
          </div>
          <div class="contact-item">
            <img
              src="@/assets/images/20200401105022f62918.png"
              alt="邮箱"
              class="contact-icon"
            />
          </div>
        </div>
      </div>

      <div class="main-content">
        <div class="breadcrumb">
          <h4>服务品牌</h4>
          <div style="display: flex">
            <router-link :to="{ path: '/' }">
              <li class="active">首页</li> </router-link
            >>延保信息>服务品牌
          </div>
        </div>
        <!-- 新增新闻列表部分 -->
        <div class="news-list">
          <p>
            日韩系：目前主要针对的日韩系汽车品牌丰田、日产、本田、三菱、现代、起亚等主流日韩品牌
          </p>
          <p>
            欧美系：目前主要针对的欧美系品牌有：
            大众、宝马、奥迪、奔驰、雪铁龙、沃尔沃、欧宝、福特、别克、雪佛兰、克莱斯勒等
          </p>
          <p>自主系：目前主要针对所有国内主流自主品牌</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";

const newsList = ref([
  {
    title: "安心汽车延保服务",
    description: "为您的爱车提供全方位的保障...",
    image: "@/assets/images/news1.jpg",
  },
  {
    title: "延保期内客户车辆出现故障怎么办？",
    description: "当您的车辆出现问题时，我们提供快速响应服务...",
    image: "@/assets/images/news2.jpg",
  },
  {
    title: "汽车延保该不该买？",
    description: "详细解析汽车延保的优势与必要性...",
    image: "@/assets/images/news3.jpg",
  },
]);
</script>
<style scoped lang="scss">
a {
  text-decoration: none;
  color: #333;
}

.about-summary {
  .banner {
    img {
      width: 100%; // 示例样式
      height: auto; // 示例样式
    }
  }

  .company-info {
    display: flex;
    padding: 20px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;

    .left-sidebar {
      width: 250px;
      padding: 20px;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      align-items: center;

      h3 {
        color: #c66b00;
        font-size: 22px;
        font-weight: 700;
      }

      .menu {
        list-style: none;
        padding: 0;

        li {
          padding: 10px 15px;
          cursor: pointer;
        }
      }

      .contact-info {
        .contact-item {
          display: flex;
          align-items: center;
        }
      }
    }

    .main-content {
      flex: 1;
      padding: 0 30px;
      text-align: center;

      .breadcrumb {
        margin-bottom: 20px;
        display: flex;
        align-items: end;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        padding: 10px;

        h4 {
          color: #333;
          margin: 0;
        }
      }

      .news-list {
        text-align: left;
        font-size: 14px;
      }

      img {
        margin: 0 auto;
        display: inline-block;
      }
    }
  }

  .service-features {
    display: flex;
    // gap: 20px;
    // flex-wrap: wrap;
    font-size: 14px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 20px;

    .feature_flex {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      gap: 30px;
      padding-left: 5%;
      padding-right: 5%;

      .feature-item {
        flex: 1 1 calc(50% - 40px);
        min-width: 200px;
        border-radius: 8px;
        padding: 10px;

        p {
          color: #666;
          line-height: 1.6;
          margin: 0;
        }
      }
    }
  }
}
</style>
